<template>
  <div class="app-container">
    <div class="box-server">
      <el-row class="box-elrow" :gutter="24">
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-input v-model="params.searchWord" @keyup.enter.native="handleFilter" placeholder="用户ID/昵称/手机号"></el-input>
          </div>
        </el-col>
        <el-col :span="16">
          <div class="grid-content bg-purple">
            <el-button type="primary" @click="handleFilter(val)">查询</el-button>
             <el-button type="primary" @click="tables">批量屏蔽</el-button>
          </div>
        </el-col>
      </el-row>

      <div class="box-data">
        <el-table
          ref="multipleTable"
          :data="tables"
          height="650px"
          tooltip-effect="dark"
          style="width: 100%"
          border
          center
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection"></el-table-column>
          <el-table-column fixed prop="user_id" label="用户ID"></el-table-column>
          <el-table-column prop="content" label="文字内容"></el-table-column>
          <el-table-column prop="content" label="照片/视频">
              <template  slot-scope="scope">
               <div v-for="(item,index) in scope.row.imgs" :key="index" style="display:flex;">
                  <el-image :src="item.url" style="width:30px;">
                </el-image>
               </div>
              </template>
          </el-table-column>
          <el-table-column prop="content" label="所在位置"></el-table-column>
          <el-table-column
            prop="visiable"
            label="公开类型"
            :show-overflow-tooltip="true"
            :formatter="statusFormtter"
          ></el-table-column>
          <el-table-column prop="device" label="发布设备"></el-table-column>
           <el-table-column
            prop="status"
            label="状态"
            :show-overflow-tooltip="true"
            :formatter="statusFormtters"
          ></el-table-column>
          <el-table-column prop="created_at" label="发布时间"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="dynamicviewing(scope.$index, scope.row)">查看</el-button>
              <el-button
                size="mini"
                type="danger"
                @click="Illegalshielding(scope.$index, scope.row)">违规屏蔽</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="box-page">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="params.pageNum"
          :page-sizes="[3, 5, 10, 15]"
          :page-size="params.page"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
        ></el-pagination>
      </div>
    </div>
    <!-- 查看朋友圈动态 -->
     <el-dialog title="查看动态详情"
      :visible.sync="dialogviewingVisible"
        width="35%"
      >
     <div><label for="">文字内容:</label><div class="ptop">{{searchchakan.content}}</div></div>
     <div class="imagestop"><label for="">照片/视频:</label></div>
    <div class="images-box">
       <div class="demo-image" style="marign-top:15px" v-for="(item,index) in searchchakan.imag"
               :key="index">
            <el-image :src="item.url"  lazy style="width: 100px; height: 100px;"></el-image>
    </div>
    </div>
  </el-dialog>
  </div>
</template>

<script>
import { fcList,shield} from "@/api/user";
export default {
  data() {
    return {
      dialogStatus: "",
      input: "",
      dialogFormVisible: false,
      dialogviewingVisible:false,
      params: {
        searchWord: ""
      },
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      tableData: [],
      multipleSelection: [],
      fcId:[],
      searchchakan:{
        content:"",
        imag:[]
      }
    };
  },
  created() {
    this.list();
  },
  computed: {
    tables() {
      const input = this.input;
      if (input) {
        return this.tableData.filter(data => {
          console.log(data);
          return Object.keys(data).some(key => {
            return (
              String(data[key])
                .toLowerCase()
                .indexOf(input) > -1
            );
          });
        });
      }
      return this.tableData;
    }
  },
  methods: {
      handleFilter(val){
      this.list();
      this.params.page=val;
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      console.log(val);
      this.multipleSelection = val;
    },
    statusFormtter(row, column) {
      const user_type = row.visiable;
      console.log(user_type);
      if (user_type == 1) {
        return "公开";
      } else if (user_type == 2) {
        return "私密";
      }
    },
    statusFormtters(row,column){
      console.log(row);
      const user_status = row.status;
      if (user_status == 1) {
        return "审核成功";
      } else if (user_status == 2) {
        return "审核失败";
      } else if (user_status == 3) {
        return "未审核";
      }else if (user_status == 4) {
        return "草稿状态";
      }
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    handleSizeChange(val) {
      this.params.pageNum=val;
      this.list();
    },
    handleCurrentChange(val) {
      this.params.page=val;
      this.list();
    },
    list() {
      fcList(this.params).then(response => {
        this.tableData = response.data;
        console.log(this.tableData);
      });
    },
    Illegalshielding(row,value){
      this.fcId=[];
      this.fcId.push(value.id)
      this.$confirm("确定将该条动态设置为涉嫌违规屏蔽？设置后，该条动态仅发布者可见，好友不可见。", "提示", {
        confirmButtonText: "确认",
        concelButtonText: "取消",
        type: "warning"
      }).then(async() => {
        debugger;
       await shield({fcId:JSON.stringify(this.fcId)});
       this.list();
       this.$message({
          type: "success",
          message: "屏蔽成功"
        });
      })

    },
    // 查看朋友圈
    dynamicviewing(row,value){
      console.log(value);
        this.searchchakan.content=value.content;
        var imags = value.imgs;
        this.searchchakan.imag=imags;
        // imags.map((item)=>{console.log(item.url)})
        // this.searchchakan.
        // this.searchchakan.imag=add;
        console.log(this.searchchakan.imag);
        this.dialogviewingVisible=true;
    }
  }
};
</script>
<style lang="scss" scoped>
.app-container {
  height: 100%;
}
.box-server {
  height: 100%;
  background-color: #ffff;
  margin: 20px 20px 20px 20px;
  .box-elrow {
    padding: 16px 16px 16px 16px;
  }
  .Exhibition {
    height: 50px;
    margin: 10px 16px 0px;
    display: flex;
    background-color: #f2f2f2;
    .exhibitionleft {
      width: 8px;
      background-color: #009688;
    }
    .exhibitionright {
      display: flex;
      // justify-content: space-between;
      align-content: center;
      .box-item {
        background-color: #3ebfea;
        padding: 8px 12px 8px 12px;
        border-radius: 5px;
        margin-right: 5px;
      }
    }
  }
  .exhtitle {
    display: flex;
    align-items: center;
  }
  .box-data {
    padding: 16px 16px 16px 16px;
  }
}
.pr {
  padding-top: 12px;
}
.ptop{
  margin-top:12px;
}
.box-page {
  display: flex;
  justify-content: flex-end;
}
.demo-image{
  overflow:auto;
}
.imagestop{
  margin-top:20px;
}
.images-box{
  display: flex;
  align-content: center;
  margin-top:20px;
  flex-wrap: wrap;
}
::v-deep .el-table .cell{
  display:flex;
  align-items: center;
  flex-wrap: wrap;
}
</style>

